<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<title></title>
<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。 
	pageContext.setAttribute("basePath", basePath);
	//out.write(basePath);
%>

<!-- Bootstrap core CSS -->
<link href="<%=basePath%>bootstrap3/css/bootstrap.min.css"
	rel="stylesheet">
<link href="data:text/css;charset=utf-8,"
	data-href="<%=basePath%>bootstrap3/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<link href="<%=basePath%>bootstrap3/css/docs.min.css" rel="stylesheet">

<script src="<%=basePath%>bootstrap3/js/jquery.min.js"></script>

<script src="<%=basePath%>bootstrap3/js/bootstrap.min.js"></script>

<script src="<%=basePath%>bootstrap3/js/docs.min.js"></script>

<script src="<%=basePath%>bootstrap3/js/ie10-viewport-bug-workaround.js"></script>
<style>
#backgrade {
	height: 1000px;
	width: 100%;
	background: url(<%=basePath%>bootstrap3/imgs/backgrade.png);
	background-color: #303E51;
	margin-left: auto;
	margin-right: auto;
}

#logined {
	width: 45%;
	height: 350px;
	margin-left: auto;
	margin-right: auto;
}

#imgback img {
	width: 100%;
	height: 350px;
}

#inlogin {
	height: 50%;
	margin: 100px 50px;
}

.loginBack {
	background: url(<%=basePath%>bootstrap3/imgs/login背景.jpg);
}
</style>
<script type="text/javascript">
	jQuery(document).ready(function() {
		if (window.history && window.history.pushState) {
			$(window).on('popstate', function() {
				// 当点击浏览器的 后退和前进按钮 时才会被触发， 
				window.history.pushState('forward', null, '');
				window.history.forward(1);
			});
		}
		//
		window.history.pushState('forward', null, ''); //在IE中必须得有这两行
		window.history.forward(1);
	});
	function checkUserName() {
		var userName = $("#userName")[0].value;

		var spanUserName = document.getElementById("spanUserName");
		if (userName[0] == null || userName[0] == "") {
			//提示信息					
			spanUserName.innerHTML = "请输入用户名！";
			spanUserName.style.color = "#D44950";
			//msg += "请输入姓名！\n"
			document.getElementById("userName").focus();
			//修改标志变量
			return false;
		} else {
			spanUserName.innerHTML = "";
			//修改标志变量
			return true;
		}
	}

	function checkPsw() {
		//密码非空验证
		var userPassword = document.getElementById("userPassword").value;

		//信息提示框
		var spanUserPsw = document.getElementById("spanUserPsw");
		if (userPassword == null || userPassword == "") {

			//错误提示信息
			//提示信息					
			spanUserPsw.innerHTML = "请输入密码！";
			spanUserPsw.style.color = "#D44950";
			return false;
		} else {
			//验证通过  清空提示内容
			spanUserPsw.innerHTML = "";
			return true;
		}
	}

	function checkall() {
		var ischeckUserName = checkUserName();
		var ischeckPsw = checkPsw();
		console.info(ischeckUserName);
		console.info(ischeckPsw);
		if (ischeckUserName && ischeckPsw) {
			return true;
		} else {
			return false;
		}
	}
</script>
<!-- <script type="text/javascript">
	function changeR(node) {
		// 用于点击时产生不同的验证码
		node.src = "randomcode.jpg?time=" + new Date().getTime();
	} -->
</script>
<body>
	<div id="backgrade">
		<div style="height: 300px;"></div>
		<div id="logined">
			<div style="height: 100%; width: 40%; float: left;">
				<div id="imgback">
					<img src="<%=basePath%>bootstrap3/imgs/电灯背景_meitu_1.jpg"
						class="img-rounded" />
				</div>
			</div>
			<div style="height: 100%; width: 60%; float: left;" class="loginBack">
				<div id="inlogin">
					<form class="form-horizontal" role="form"
						action="<%=basePath%>user/login.action" method="post">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-4 control-label"><font
								face="仿宋" size="4">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</font></label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="userName"
									name="username" placeholder="请输入卡号" onblur="checkUserName();">
								<span id="spanUserName"></span>
							</div>
						</div>
						<hr />
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-4 control-label"><font
								face="仿宋" size="4">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</font></label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="userPassword"
									name="userpassword" placeholder="请输入密码" onblur="checkPsw();">
								<span id="spanUserPsw"></span>
							</div>
						</div>
						<hr />
						<!-- 						<div class="form-group">
							<label for="inputPassword3" class="col-sm-4 control-label"><font
								face="仿宋" size="4">验&nbsp;&nbsp;证&nbsp;&nbsp;码</font></label>
							<div class="col-sm-8">
								<img alt="random" src="randomcode.jpg" onclick="changeR(this)"
									style="cursor: pointer;"><br /> <br />
							</div>
						</div>
						<hr /> -->
						<div class="form-group">
							<div class="col-sm-offset-3 col-sm-4" style="float: left;">
								<select class="form-control" name="role">
									<option value="1">管理员</option>
									<option value="2">操作员</option>
									<option value="3">用户</option>
								</select>
							</div>
							<div class="col-sm-offset-1 col-sm-2" style="float: left;">
								<button type="submit" class="btn btn-default"
									onclick="return checkall();">&nbsp;登&nbsp;&nbsp;&nbsp;录&nbsp;</button>
							</div>
						</div>
				</div>
				</form>
			</div>
		</div>
	</div>
</body>

</html>